<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>加入代理</title>
    <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon"/>

    <!--<link type="text/css" rel="stylesheet" href="/template/default/css/font-awesome.min.css"/>-->
    <link href="https://static.9hive.cn/global/vendor/icheck/icheck.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://static.9hive.cn/global/vendor/bootstrap-3.3.7/bootstrap.min.css">
    <link href="https://static.9hive.cn/global/vendor/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/template/default/css/common.css">
    <link type="text/css" rel="stylesheet" href="/template/default/css/custom_common.css"/>

    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript"
            src="https://static.9hive.cn/global/vendor/bootstrap-3.3.7/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="https://static.9hive.cn/global/vendor/bootstrap-select/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>
    <style>
        .layui-layer-content {
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
        }


    </style>
</head>
<body>

<a class="tabbar" href="javascript:history.back(-1)" title="返回"><img
        src="/template/default/images/arrow_left_white.png"/><label>加入代理</label></a>
<div class="padding-20 ">
    <div class="flex-horziontal content_center">
        <label class=" width-90 text-right">我要成为：</label>
        <div class="radio i-checks width-200" style="display: flex;align-items: center">
            <label for="agent" class="margin-right-5">代理</label>
            <input type="radio" name="wantAddType" id="agent" checked value="0"/>
            <label for="brand" class="margin-right-5 margin-left-20">商户</label>
            <input type="radio" name="wantAddType" id="brand" value="1"/>

        </div>
    </div>
    <div class="margin-top-20 text-center">
        <div>
            <label class="width-90 text-right">姓名：</label><input class="light-input width-200" id="name"/>
        </div>
        <div class="margin-top-20">
            <label class="width-90 text-right">联系方式：</label><input type="number" class="light-input width-200"
                                                                   id="phone"
                                                                   value=""/>
        </div>
        <div class="margin-top-20" id="agentContainer">
            <label class="width-90 text-right">代理级别：</label>
            <select class="light-input form-control selectpicker width-200" id="agentLevel" data-style="btn-select"
                    required>
                <option value="0">一级代理</option>
                <option value="1">二级代理</option>
                <option value="2">三级代理</option>
            </select>
        </div>
        <div id="brandContainer" class="hidden">
            <div class="margin-top-20"><label class="width-90 text-right">微信：</label>
                <input class="light-input width-200" id="weichat"/></div>
            <div class="margin-top-20"><label class="width-90 text-right">QQ：</label>
                <input class="light-input width-200" id="qq"/></div>
            <div class="margin-top-20"><label class="width-90 text-right">产品：</label>
                <input class="light-input width-200" id="product"/></div>
        </div>

        <button class="hive-btn hive-btn-primary margin-top-40 width-250" id="apply">立即加入</button>
    </div>
    <div class="background-white margin-top-5 vertical-flex-center padding-15 hidden" id="agentPay">

        <img src="${plateformConfig.oneAgentReceiptQrcode!}"
             class="qrcode-img pay_qrcode">
        <img src="${plateformConfig.twoAgentReceiptQrcode!}"
             class="qrcode-img pay_qrcode hidden">
        <img
                src="${plateformConfig.threeAgentReceiptQrcode!}"
                class="qrcode-img pay_qrcode hidden">

        <div class="margin-top-10 text-left width_100p">温馨提示：</div>
        <div class="margin-top-5 text-left ">1、缴纳代理费用时，请务必备注姓名与手机号。</div>
        <div class="margin-top-5 text-left width_100p">2、请核对收款人：张峰</div>
    </div>

</div>
<script src="https://static.9hive.cn/global/vendor/icheck/icheck.min.js"></script>
<script type="text/javascript">
    (function () {
        $('.i-checks').iCheck({
            radioClass: 'iradio_flat-red',
        });
        $("input[name='wantAddType']").on("ifChecked", function () {
            if ($(this).val() == 0) {
                $("#brandContainer").addClass("hidden");
                $("#agentContainer").removeClass("hidden");
            } else {
                $("#brandContainer").removeClass("hidden");
                $("#agentContainer").addClass("hidden");
            }
        })
    })()

</script>
<script>
    $(document).on('click', '#apply', function () {
        var index = $("input[name='wantAddType']:checked").val();

        var name = $('#name').val();
        var phone = $('#phone').val();
        var qq = $('#qq').val();
        var wechat = $('#weChat').val();
        var product = $('#product').val();
        var agentType = $("#agentLevel").val();

        if (!name) {
            layer.msg("请输入姓名");
            return false;
        }
        if (!phone || phone.length != 11) {
            layer.msg("请输入正确的手机号码");
            return false;
        }
        if (index == 0) {
        } else {
            if (!wechat) {
                layer.msg("请输入微信号");
                return false;
            } else if (!product) {
                layer.msg("请输入产品");
                return false;
            }
        }

        $.ajax({
            url: '/b/agent/applyAgent',
            data: {
                phone: phone,
                name: name
            },
            success: function (data) {
                if (data.state == 'ok') {
                    layer.msg('申请成功');
                    $("#agentPay").removeClass("hidden")
                } else {
                    layer.msg(data.msg)
                }
            },

        })
    });
</script>
</body>
</html>